<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >考试报名</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'GradeList' }"
            >选择考试级别</el-breadcrumb-item
          >
          <el-breadcrumb-item>选择考试项目</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row
      v-if="checkEnrollListData != undefined && checkEnrollListData.length > 0"
    >
      <div class="check_enroll_content">
        <!-- 步骤条 -->
        <el-row type="flex" justify="center">
          <el-col :span="13">
            <div class="check_enroll_steps">
              <div class="check_enroll_steps_title">报名流程</div>
              <el-steps :active="1" finish-status="success" align-center>
                <el-step title="选择考试级别"></el-step>
                <el-step title="选择考试项目"></el-step>
                <el-step title="填写报名信息"></el-step>
                <el-step title="确认报名"></el-step>
                <el-step title="支付费用"></el-step>
              </el-steps>
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <el-table
              :data="checkEnrollListData"
              border
              style="width: 100%"
              size="mini"
              :cell-style="cellStyleFn"
              class="check_enroll_table"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="title"
                label="考试项目"
                align="center"
                min-width="220"
              ></el-table-column>

              <el-table-column
                prop="area_name"
                label="考点"
                width="110"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="place"
                label="考场地址"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="remain_count"
                label="剩余名额"
                align="center"
                width="100"
              ></el-table-column>

              <el-table-column label="报名起止日期" width="200" align="center">
                <template slot-scope="scope">
                  <div>
                    {{
                      scope.row.enroll_start_time +
                      "至" +
                      scope.row.enroll_end_time
                    }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="enroll_status"
                label="报名状态"
                width="100"
                align="center"
                :formatter="formatterStatusFn"
              ></el-table-column>

              <el-table-column
                prop="exam_money"
                label="考试费用"
                width="100"
                align="center"
              ></el-table-column>

              <el-table-column
                label="操作"
                width="260"
                itemprop=""
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-document"
                    @click="toEnrollDetail(scope.$index, scope.row)"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    icon="iconfont icon-baoming"
                    v-if="
                      scope.row.enroll_status == 2 &&
                      scope.row.remain_count != 0
                    "
                    @click="checkEnroll(scope.$index, scope.row)"
                    >报名&nbsp;&nbsp;&nbsp;</el-button
                  >
                  <el-button
                    size="mini"
                    type="info"
                    icon="iconfont icon-baoming"
                    v-if="scope.row.enroll_status == 1"
                    >未开启</el-button
                  >
                  <el-button
                    size="mini"
                    type="info"
                    icon="iconfont icon-baoming"
                    v-if="scope.row.enroll_status == 3"
                    >已结束</el-button
                  >
                  <el-button
                    size="mini"
                    type="info"
                    v-if="
                      scope.row.enroll_status == 2 &&
                      scope.row.remain_count == 0
                    "
                  >
                    名额已满
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <div class="check_enroll_pagination">
              <el-pagination
                @size-change="listSizeChange"
                @current-change="listCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <el-row v-else>
      <el-empty description="暂无考试项目"></el-empty>
    </el-row>
  </div>
</template>
<style src="../../assets/css/enroll/checkEnroll.css" scoped></style>

<script>
export default {
  name: "CheckEnroll",
  components: {},
  data() {
    return {
      gradeId: "", // 当前选择等级id
      checkEnrollListData: [], // 报名列表数据
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      statusList: [
        {
          key: 1,
          value: "未开始",
        },
        {
          key: 2,
          value: "可报名",
        },
        {
          key: 3,
          value: "已结束",
        },
      ], // 报名状态列表
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    let gradeId = this.$route.params.gradeId;
    if (gradeId != undefined && gradeId != "") {
      this.$store.commit("set_checkedGradeId", gradeId);
      this.gradeId = gradeId;
    } else {
      this.gradeId = this.$store.state.checkedGradeId;
    }
    this.getListDataFn();
  },
  methods: {
    // 查询列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/mobile/examList";
      let data = {
        category_id: this.gradeId,
        page: this.currentPage,
        perPage: this.pageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.checkEnrollListData = response.exam_list;
            that.total = response.exam_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 选择报名
    checkEnroll: function (index, row) {
      this.$store.commit("set_examineeInforList", {});
      this.$router.push({
        name: "AddUserInforList",
        params: {
          enrollId: row.id,
        },
      });
    },
    // 报名状态格式化
    formatterStatusFn: function (row) {
      let enroll_status = row.enroll_status;
      let text = "";
      this.statusList.forEach(function (item) {
        if (item.key == enroll_status) {
          text = item.value;
        }
      });
      return text;
    },
    // 设置单元格字体颜色
    cellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 7) {
        style = "color: #F6705E";
      } else if (columnIndex == 6) {
        if (row.enroll_status == 2) {
          style = "color: #8ECF5F";
        } else if (row.remain_count == 0) {
          style = "color: #F6705E";
        }
      }
      return style;
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 查看按钮
    toEnrollDetail: function (index, row) {
      this.$router.push({
        name: "EnrollDetail",
        params: {
          enrollId: row.id,
        },
      });
    },
  },
};
</script>
